<template>
  <div class="gallery-index">
    <div class="demo-nav">
      <div class="demo-nav__title">免费图库</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div>
      <van-swipe :autoplay="2000" indicator-color="white" class="index_swipe">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" style="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="gallery-van-tabs">
      <van-tabs v-model="activeName">
        <van-tab title="建房图纸" name="drawing">
          <gallery-drawing></gallery-drawing>
        </van-tab>
        <van-tab title="装修效果图" name="effect">
          <gallery-effect></gallery-effect>
        </van-tab>
<!--        <van-tab title="3D设计" name="design">-->
<!--          <gallery-design></gallery-design>-->
<!--        </van-tab>-->
      </van-tabs>
    </div>
  </div>
</template>

<script>
    import axios from "axios";
    import galleryDrawing from './index/gallery_drawing';
    import galleryEffect from './index/gallery_effect';
    import galleryDesign from './index/gallery_design';

    export default {
      name: "gallery_index",
      data() {
        return{
          images: "",
          activeName: 'drawing',
        }
      },
      components: {
        galleryDrawing,galleryEffect,galleryDesign
      },
      created() {
        axios.get("http://localhost:5632/images_icon").then((_e) => {
          this.images = _e.data;
        });

        axios.get("http://localhost:5632/getgoods_icon").then((_d) => {
          this.goods_icon = _d.data;
        });
      },
      methods: {
        toBack(){
          this.$router.go(-1);//返回上一层
        }
      }
    }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
